<template>
	<view class="leave_box">
		<navTitle :titleRight="''" :title="'篩選'"></navTitle>
		<view class="msg-box">
			<view class="mb-l">
				<view :class="selIndex==1?'active':''" @tap="handleSel(1)">职位</view>
				<view :class="selIndex==2?'active':''" @tap="handleSel(2)">薪资</view>
			</view>
			<view class="mb-r">
				<block v-if="selIndex==1">
					<view class="mb-title">职位</view>
					<view class="mb-list">
						<view :class="{'active': selectedPositions.includes('全部')}" @tap="toggleSelection('全部')">全部
						</view>
						<view :class="{'active': selectedPositions.includes('工程師')}" @tap="toggleSelection('工程師')">工程師
						</view>
						<view :class="{'active': selectedPositions.includes('施工管理員')}" @tap="toggleSelection('施工管理員')">
							施工管理員</view>
						<view :class="{'active': selectedPositions.includes('建筑设计师')}" @tap="toggleSelection('建筑设计师')">
							建筑设计师</view>
						<view :class="{'active': selectedPositions.includes('质量控制员')}" @tap="toggleSelection('质量控制员')">
							质量控制员</view>
						<view :class="{'active': selectedPositions.includes('采购专员')}" @tap="toggleSelection('采购专员')">
							采购专员</view>
						<view :class="{'active': selectedPositions.includes('成本控制员')}" @tap="toggleSelection('成本控制员')">
							成本控制员</view>
						<view :class="{'active': selectedPositions.includes('安全主管')}" @tap="toggleSelection('安全主管')">
							安全主管</view>
						<view :class="{'active': selectedPositions.includes('施工員')}" @tap="toggleSelection('施工員')">施工員
						</view>
						<view :class="{'active': selectedPositions.includes('标准员')}" @tap="toggleSelection('标准员')">标准员
						</view>
						<view :class="{'active': selectedPositions.includes('机械员')}" @tap="toggleSelection('机械员')">机械员
						</view>
						<view :class="{'active': selectedPositions.includes('质量员')}" @tap="toggleSelection('质量员')">质量员
						</view>
						<view :class="{'active': selectedPositions.includes('资料员')}" @tap="toggleSelection('资料员')">资料员
						</view>
						<view :class="{'active': selectedPositions.includes('项目经理')}" @tap="toggleSelection('项目经理')">
							项目经理</view>
					</view>
				</block>
				<block v-if="selIndex==2">
					<view class="mb-title">薪资</view>
					<view class="mb-list">
						<view :class="{'active': selectedSalaries.includes(item.name)}" v-for="(item, index) in xzList"
							:key="index" @tap="toggleSalarySelection(item.name)">
							{{ item.name }}
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="wrap-footer">
			<view class="btn-jj" @tap="clearAllSelections">清除</view>
			<view class="btn-js" @tap="confirmSelection">確定</view>
		</view>
	</view>
</template>

<script>
	import navTitle from './../boss/components/nav-title.vue';
	export default {
		components: {
			navTitle
		},
		data() {
			return {
				selIndex: 1, // 当前选择的类别（1:职位，2:薪资）
				selectedPositions: [], // 存储选中的职位
				selectedSalaries: [], // 存储选中的薪资
				xzList: [{
						id: 1,
						name: '5K-10K'
					},
					{
						id: 2,
						name: '10K-20K'
					},
					{
						id: 3,
						name: '20K-30K'
					},
					{
						id: 4,
						name: '30K-50K'
					}
				]
			};
		},
		methods: {
			handleSel(type) {
				this.selIndex = type;
			},
			confirmSelection() {

				let filteredArr = this.selectedPositions.filter(item => item !== "__ob__");

				let result = filteredArr.join(", "); // 以逗号加空格分隔

				console.log(result); // 输出: "施工管理員, 建筑设计师, 质量控制员, 施工員"
				uni.setStorageSync('filteredjs',result);
				// 处理薪资范围并拆分成两个字段
				if(this.selectedSalaries.length<0)
				{
					let formattedSalary = this.selectedSalaries.map(salary => {
						// 将薪资范围 '5K-10K' 转换为 '5k 10k'，然后拆分成 min 和 max
						let salaryRange = salary.replace('K', 'k').split('-');
						return {
							min: salaryRange[0], // 第一个值作为 min
							max: salaryRange[1], // 第二个值作为 max
						};
					});
					uni.setStorageSync('min',formattedSalary[0].min),
					uni.setStorageSync('max',formattedSalary[0].max)
				}
				// 跳转到 tabBar 页面
				uni.switchTab({
					url: '/pages/index/cart'
				});
				// console.log(formattedSalary); // 输出: [{ min: '5k', max: '10k' }]
			},
			toggleSelection(position) {
				const index = this.selectedPositions.indexOf(position);
				if (index === -1) {
					this.selectedPositions.push(position);
				} else {
					this.selectedPositions.splice(index, 1);
				}
			},
			toggleSalarySelection(salary) {
				this.selectedSalaries = [salary];
			},
			clearAllSelections() {
				this.selectedPositions = [];
				this.selectedSalaries = [];
			}
		}
	};
</script>

<style lang="scss" scoped>
	.leave_box {
		width: 100%;
		height: 100vh;
		background: #F4F6FA;
	}

	.msg-box {
		width: calc(100% - 20px);
		height: calc(100% - 114px);
		margin: 10px auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.mb-l {
		width: 75px;
		padding-left: 10px;
		font-size: 16px;
		color: #333333;
		line-height: 36px;
	}

	.mb-l view {
		margin: 10px 0 5px 0;
	}

	.mb-l .active {
		font-weight: 600;
		color: #1C7AF7;
	}

	.mb-r {
		padding: 10px;
		width: calc(100% - 105px);
		border-radius: 10px;
		background: #fff;
		height: 100%;
		/* 确保右侧内容区域填满剩余高度 */
		overflow-y: auto;
		/* 让内容可滚动 */
	}

	.mb-title {
		height: 22px;
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
	}

	.mb-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		/* 增加间隔 */
	}

	.mb-list view {
		width: calc(46% - 6px);
		/* 设置每个项的宽度 */
		line-height: 40px;
		height: 40px;
		text-align: center;
		border-radius: 6px;
		background: #F4F4F4;
		font-size: 15px;
		color: #333333;
		margin: 10px 0;
	}

	.mb-list view:nth-child(2n) {
		margin-left: 10px;
	}

	.mb-list view.active {
		border: 1px solid #1C7AF7;
		color: #1C7AF7;
		font-weight: 600;
	}

	.wrap-footer {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 44px;
		text-align: center;
		background: #fff;
	}

	.btn-jj {
		width: 110px;
		height: 44px;
		border-radius: 8px;
		font-weight: 500;
		font-size: 15px;
		color: #1C7AF7;
		margin-right: 10px;
		border: 1px solid #1C7AF7;
	}

	.btn-js {
		width: 215px;
		height: 44px;
		background: linear-gradient(90deg, #016CF1 0%, #0697F6 100%);
		border-radius: 8px;
		font-weight: 500;
		font-size: 15px;
		color: #FFFFFF;
	}
</style>